<template>
    <el-dialog v-model="props.visible" title="定稿" align-center width="40%" @close="handleClose">
        <el-row :gutter="20" class="mb8">
            <el-col :span="8">
                订单类别：微定制订单
            </el-col>
            <el-col :span="6">
                客户名称：XXX
            </el-col>
            <el-col :span="10" style="text-align: right;">
                产品款式：A款不锈钢蛋糕餐具(5人份)
            </el-col>
        </el-row>
        <el-row :gutter="20" class="mb20">
            <el-col :span="8">
                老客户原稿：<el-link type="primary">下载原稿信息</el-link>
            </el-col>
            <el-col :span="6">
                设计师：韩剑飞
            </el-col>
            <el-col :span="10">
                <div class="import_right"><el-button type="primary">一键导入</el-button></div>
            </el-col>
        </el-row>


        <el-form :model="form" ref="formRef" label-width="auto">
            <el-row :gutter="10" class="mb8">
                <el-col :span="12">
                    <el-form-item class="designSketch" label="组装效果图:" prop="designSketch">
                        <el-upload ref="designSketchRef" class="upload-demo" :show-file-list="false" drag
                            :action="uploadImgUrl" :headers="headers" multiple :auto-upload="true"
                            :on-success="handleDesignSketchSuccess" :before-upload="beforedeSignSketchUpload">
                            <img style="height: 100px;" v-if="form.designSketch" :src="form.designSketch" />
                            <template v-else>
                                <div style="padding-top: 10px;">
                                    <uploadStyle type="1" icon="PictureFilled" />
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item class="designSketch" label="源文件:" prop="sourceFile">
                        <el-upload ref="sourceFileRef" class="upload-demo" :show-file-list="false" drag
                            :action="uploadImgUrl" :headers="headers" multiple :auto-upload="true"
                            :on-success="handleSourceFileSuccess" :before-upload="beforeSourceFileUpload">
                            <img style="height: 100px;" v-if="form.sourceFile" :src="form.sourceFile" />
                            <template v-else>
                                <div style="padding-top: 10px;">
                                    <uploadStyle type="1" icon="upload-filled" />
                                </div>
                            </template>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>

            <div class="mb20" v-for="(item, index) in 5" :key="index">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="6">
                        <div style="line-height: 32px;"><strong>T款长方形抽屉盒底盒</strong></div>
                    </el-col>
                    <el-col :span="14">
                        <el-form-item label="产品类型" prop="type">
                            <el-select v-model="form.type" placeholder="请选择产品类型">
                                <el-option label="半成品" value="半成品" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <div class="import_right">
                            <el-switch v-model="value2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                        </div>
                    </el-col>
                </el-row>
                <el-row :gutter="10" class="mb8">
                    <el-col class="smallPicture" :span="7">
                        <el-upload ref="sourceFileRef" class="upload-demo" :show-file-list="false" drag
                            :action="uploadImgUrl" :headers="headers" multiple :auto-upload="true"
                            :on-success="handleSourceFileSuccess" :before-upload="beforeSourceFileUpload">
                            <img style="height: 100px;" v-if="form.sourceFile" :src="form.sourceFile" />
                            <template v-else>
                                <div style="padding-top: 10px;">
                                    <uploadStyle  icon="PictureFilled" />
                                </div>
                            </template>
                        </el-upload>
                    </el-col>
                    <el-col :span="17">
                        <el-checkbox-group v-model="form.types" class="groupFlex">
                            <el-checkbox label="烫金版" value="烫金版" />
                            <el-checkbox label="烫金工序" value="烫金工序" />
                            <el-checkbox label="铆钉工序" value="铆钉工序" />
                            <el-checkbox label="包装工序" value="包装工序" />
                        </el-checkbox-group>
                    </el-col>
                </el-row>
            </div>

            <el-form-item label="设计绩效" prop="performance">
                <el-input v-model="form.performance" style="width: 240px" placeholder="请输入绩效" />
            </el-form-item>
        </el-form>

        <template #footer>
            <div class="dialog-footer">
                <el-button @click="handleClose">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 认</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { type FormInstance, UploadProps } from 'element-plus';
import { ElLoading } from 'element-plus'
import { globalHeaders } from "@/utils/request";
import uploadStyle from './uploadStyle.vue';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const props = defineProps(['visible', 'initList']);
const emits = defineEmits(['submit', 'close']);
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const uploadImgUrl = ref(baseUrl + "/resource/oss/upload");
const headers = ref(globalHeaders);
const dialogVisible = ref();


const formRef = ref<FormInstance>();
const form = ref<any>({
    designSketch: '', // 效果图
    sourceFile: '', // 源文件
    performance: '', // 绩效
    type: '', // 产品类型
    types: [],
});

const value2 = ref(false);




// watch(() => props.visible, async (newValue) => {
//     if (newValue) {
//         const { rows } = await getCustomerApi({ pageNum: 1, pageSize: 999 });
//         customerList.value = rows;
//     };
// }, { deep: true });

/** 上传效果图 */
const handleDesignSketchSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()
    form.value.designSketch = response.data.url
};

const beforedeSignSketchUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};

// 上传源文件
const handleSourceFileSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
    dialogVisible.value.close()
    form.value.sourceFile = response.data.url
};

const beforeSourceFileUpload: UploadProps['beforeUpload'] = () => {
    dialogVisible.value = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
};




const handleSubmit = async () => {
    emits('submit', false);
    // proxy?.$modal.msgSuccess('新增成功');
};

const handleClose = () => {
    formRef.value?.resetFields();
    emits('close');
};
</script>

<style lang="scss" scoped>
.import_right {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}


::v-deep .designSketch {
    .el-upload-dragger {
        padding: 0px 4px !important;
        height: 100px !important;
        width: 260px;
    }
}

::v-deep .smallPicture {
    .el-upload-dragger {
        padding: 0px 4px !important;
        height: 70px !important;
        width: 190px;
    }
}

.groupFlex {
    height: 70px;
    display: flex;
    align-items: center;
}
</style>